vue-rx的使用

一、各文档介绍

• 1、rxjs官网
• 2、vue-rxjs地址

二、环境搭建

• 1、使用vue-cli构建一个项目

• 2、安装vue-rx的依赖包

  yarn add rxjs
  yarn add rxjs-compat
  yarn add vue-rx

• 3、在src/main.js中配置使用rxjs

  // 使用vueRx
  import VueRx from 'vue-rx';
  import Rx from 'rxjs/Rx'
  
  Vue.use(VueRx, Rx);

三、没有使用vue-rx的时候

• 1、关于属性的使用

  import { Observable } from 'rxjs';
  export default {
    data() {
      return {
        name: new Observable.of('张三')
      }
    }
  };

• 2、关于事件的使用

  import { Observable } from 'rxjs';
  export default {
    data() {
      return {
        name: new Observable.of('张三'),
      }
    },
    mounted () {
      new Observable.fromEvent(this.$refs.btn, 'click').subscribe(e => {
        this.name = '哈哈';
      })
    }
  };

四、结合vue-rx的使用

• 1、项目中集成了vue-rx的时候会在vue中新增一个钩子函数subscriptions,和之前的data类似的使用
• 2、domStreams是一个数组用来存放事件

• 3、属性的使用

  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    domStreams: ['setName$', 'resetMsg$'],
    subscriptions() {
      return {
        // 发送一个普通的值
        name: new Observable.of('张三'),
        // 发送一个修改的值
        age$ : Observable.of(20).map(item => item + 10),
        // 定义发送一个数组
        arr$: new Observable.of(['第一本书', '第二本书']),
        // 发送一个数组
        obj$: new Observable.of({ 
          a: 'test-obj',
          name: '呵呵' 
        }),
        // 发送一个promise函数
        promise$: new Observable.fromPromise(this.getPromise()),
        // 定时器
        interval$: new Observable.interval(1000)
      }
    },
    methods: {
      getPromise() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve('promise');
          }, 1000)
        })
      }
    },
  }

• 5、事件的使用

  • 1.在视图中定义事件

    <button v-stream:click="setName$">点击按钮设置值</button>

  • 2.在domStreams中定义

    domStreams: ['setName$'],

  • 3、在subscriptions定义事件赋值给哪个变量

    name$: this.setName$.map(e => 'hello'.toUpperCase()),

六、关于switchMap、concatMap、exhaustMap的使用

• 1、定义事件

  <button class="btn" v-stream:click="getConcatMapCount$">点击获取concatMapCount$</button>
  <p>{{concatMapCount$}}</p>
  <button class="btn" v-stream:click="getSwitchMapCount$">点击获取switchMapCount$</button>
  <p>{{switchMapCount$}}</p>
  <button class="btn" v-stream:click="getExhaustMapCount$">点击获取exhaustMapCount$</button>
  <p>{{exhaustMapCount$}}</p>

• 2、定义事件名

  domStreams: ['getConcatMapCount$', 'getSwitchMapCount$', 'getExhaustMapCount$'],

• 3、触发事件

  import { Observable } from 'rxjs';
  export default {
    data() {
      return {
        count: 0,
      }
    },
    domStreams: ['getConcatMapCount$', 'getSwitchMapCount$', 'getExhaustMapCount$'],
    subscriptions() {
      return {
        // 当你连续点击按钮多次获取数据时，cancatMap会将获取到的数据按队列发出
        concatMapCount$: this.getConcatMapCount$.concatMap(e => {
          return new Observable.from(this.getCount());
        }),
        // 当你连续点击按钮多次获取数据时，switchMap只会将最后一个点击发出的值发出，前面发出的值会被吞掉
        switchMapCount$: this.getSwitchMapCount$.switchMap(e => {
          return new Observable.from(this.getCount());
        }),
        // 当你连续点击按钮多次时，exhaustMap仅执行一次，在第一次值发出后，才可以继续点击下一次发出值
        exhaustMapCount$: this.getExhaustMapCount$.exhaustMap(e => {
          return new Observable.from(this.getCount())
        })
      }
    },
    methods: {
      getCount() {
        return new Promise((resolve, reject) => {
          this.count ++;
          setTimeout(() => {
            resolve(this.count);
          }, 1000);
        })
      }
    }
  };

七、事件中传递参数

• 1、html页面

  <ul>
    <li v-for="(num, index) in numList" :key="index" v-stream:click="{
      subject: getNum$,
      data: {
        'index': index,
        'num': num
      }
    }">{{ num }}</li>
  </ul>
  <p>点击的数字为：{{ num$.index }}</p>
  <p>点击的数字下标为：{{ num$.num }}</p>

• 2、在vue中处理

  import { Observable } from 'rxjs'
  export default {
    data () {
      return {
        numList: [1, 2, 3]
      }
    },
    // v-stream事件可以统一写在这里，具体可以看vue-rx的使用
    domStreams: [
      'getNum$'
    ],
    subscriptions () {
      return {
        num$: this.getNum$
          // 从传入的对象中获取key为data的value,传入下一个operator
          .pluck('data')
          .map(data => data)
          // 因为视图引用了num$.index，所以这里要初始化num$为对象，避免报错
          .startWith({})
      }
    }
  }

• 3、输入框中获取值

  <input type="text" v-stream:keyup="getInput$">
  <p>value$: {{ value$  }}</p>

  import { Observable } from 'rxjs';
  export default {
    domStreams: ['getInput$'],
    subscriptions () {
      return {
        value$: this.getInput$
          // 选取e.event.target.value
          .pluck('event', 'target', 'value')
          .debounceTime(2000)
          // 根据value值作比较，如果和上一次一样则不发出值
          .distinctUntilChanged()
          .map(val => {
            console.log(val);
            return val;
          })
      }
    }
  }

七、使用$watchAsObservable代替vue中的watch